<template>
  <van-nav-bar title="退货申请" left-text="返回" left-arrow @click-left="goBack" />
  <section class="aui-flexView">
    <!-- 订单详细 -->
    <section class="aui-scrollView">
      <!-- 订单状态 -->
      <div class="aui-pay-change">
        <div class="aui-flex">
          <div class="aui-flex-box">
            <h3>{{ info.status_text }}</h3>
          </div>
          <div class="aui-pay-zfb">
            <img src="/assets/images/icon-zfb.png" alt="" />
          </div>
        </div>
      </div>

      <!-- 收货地址 -->
      <div class="aui-flex">
        <div class="aui-flex-add">
          <img :src="LoginUser.avatar" alt="" />
        </div>
        <div class="aui-flex-box">
          <h3>
            {{ info.address.consignee }} <em>{{ info.address.mobile }}</em>
          </h3>
          <p>{{ info.address.address_text + info.address.address }}</p>
        </div>
      </div>

      <!-- 退款详请 -->
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="status"
            is-link
            readonly
            name="status"
            label="退款原因"
            placeholder="请选择退款原因"
            @click="showPicker = true"
            :rules="[{ required: true, message: '请选择退款原因' }]"
          />
          <van-popup v-model:show="showPicker" position="bottom">
            <van-picker
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </van-popup>
          <van-field
            v-model="refundreason"
            rows="2"
            autosize
            name="refundreason"
            label="退款原因"
            type="textarea"
            maxlength="50"
            placeholder="请输入退款原因"
            show-word-limit
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            确认提交
          </van-button>
        </div>
      </van-form>
    </section>
  </section>
</template>
<script setup>
const { cookies } = useCookies();
const router = useRouter();
const route = useRoute();
const LoginUser = reactive(cookies.get("LoginUser"));
const orderid = ref(0);
const info = ref({
  address: {},
});
const status = ref("");
const status_code = ref();
const showPicker = ref(false);
const refundreason = ref("");
const columns = [
  { text: "仅退款", value: "-1" },
  { text: "退款退货", value: "-2" },
];
const goBack = () => {
  router.push("/business/order/index");
};
onBeforeMount(() => {
  orderid.value = route.query.orderid ? route.query.orderid : 0;
  getorderInfoData();
});
const getorderInfoData = async () => {
  let result = await Api.orderInfo({
    busid: LoginUser.id,
    orderid: orderid.value,
  });
  if (result.code == 1) {
    info.value = result.data;
  }
};

// 退款原因确认事件
const onConfirm = ({ selectedOptions }) => {
  showPicker.value = false;
  let [val] = selectedOptions;
  status.value = val.text;
  status_code.value = val.value;
};

const onSubmit = async (val) => {
  let data = {
    busid: LoginUser.id,
    orderid: orderid.value,
    status: status_code.value,
    refundreason: refundreason.value,
  };

  let result = await Api.orderRetreat(data);
  if (result.code == 1) {
    showNotify({
      type: "success",
      message: result.msg,
      onClose: () => {
        router.go(-1);
      },
    });
  } else {
    showNotify({ type: "danger", message: result.msg });
  }
};
</script>
<style>
@import url("/assets/css/info.css");
</style>
